<template>
  <div id="app">
    <!-- <input type="text" v-focus v-color="color">
    <button @click="changeColor">点我改变颜色</button> -->

    <div class="main">
      <div class="box" v-loading="isLoading">
        <ul>
          <li v-for=" item in list" :key="item.id">
            <p>{{ item.title }}</p>
          </li>
        </ul>
      </div>

      <!-- <div class="box2" v-loading="isLoading2">box2</div> -->
    </div>
  </div>
</template>

<script>
import axios from 'axios'
  export default {
    data(){
      return{
        color:'red',
        isLoading:true,
        isLoading2:true,
        list:[]
      }
    },
    methods:{
      changeColor(){
        this.color = 'blue'
      }
    },

    async created(){
      const res = await axios.get('https://apifoxmock.com/m1/3318905-2799336-default/news')

      setTimeout(()=>{
        this.list = res.data.data
        this.isLoading =false
      },2000)
    },

    // 自定义指令 v-xxxx ---> "Alt + f4"  (通常封装一些dom操作)
    // 局部定义

    directives:{
      'loading':{
        inserted(el,binding){
          // 接收到bool的值
          binding.value ? el.classList.add('loading') : el.classList.remove('loading')
        },
        update(el,binding){
          binding.value ? el.classList.add('loading') : el.classList.remove('loading')
        }
      },
      'focus':{
        inserted(el){
          el.focus()
        }
      },
      'color':{
        inserted(el,binding){
          el.style.color = binding.value // red
        },
        update(el,binding){
          el.style.color = binding.value
        }
      }
    }
    // 全局定义 在 main.js






  }
</script>

<style>
  .loading::before{
    content:'';
    position: absolute;
    left: 300px;
    top:100px;
    width: 30px;
    height: 30px;
    background:url(./assets/loading.gif)
  }
</style>
